<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>系统菜单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="../../component/elementUI/index.css" />
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  <!-- <link rel="stylesheet" href="../../style/wangeditor.css" /> -->
  <!-- <link rel="stylesheet" href="../../style/index.css" /> -->
  <style>
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }

    .custom-tree-node .config {
      padding: 10px 0 10px 8px;
      border-left: 1px solid #ebeef5;
    }

    .el-tree {
      border-top: 1px solid #ebeef5;
      border-left: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
    }

    .el-tree-node__content {
      padding: 10px 0 10px;
      border-bottom: 1px solid #ebeef5;
    }

    .el-dialog__header {
      padding: 15px 15px 10px;
    }

    .el-dialog__body {
      padding: 15px;
    }

    .el-dialog__footer {
      padding: 5px 15px 10px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak class="minWidth">
    <el-form :inline="true" :form="form">
      <el-form-item>
        <el-button type="primary" @click="Add">添加菜单</el-button>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入菜单" @change="check" clearable v-model.trim="Model_Name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="check" >查询</el-button>
      </el-form-item>
    </el-form>
    <el-tree :data="tableData" node-key="Model_Number" default-expand-all :expand-on-click-node="false"
      :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <i v-show="node.level==1" :class="data.Icon"></i>
          <span>{{ node.label }}</span>
          <span v-show="data.Url" style="color: #f56c6c">（<i class="el-icon-document"></i>已绑定页面）</span>
          <span v-show="data.SQL_SerialNumber" style="color: #f56c6c">（<i class="el-icon-s-tools"></i>已配置SQL）</span>
        </span>
        <span class="config">
          <el-button v-if="!data.Url" type="success" size="small" @click="Addc(node,data)">添加子菜单</el-button>
          <el-button type="primary" size="small" @click="Edit(node, data)">编辑</el-button>
          <el-button type="danger" size="small" @click="Remove(data)">删除</el-button>
        </span>
      </span>
    </el-tree>
    <!-- 菜单弹窗 -->
    <el-dialog :title="titlw=='addF'?'添加菜单':titlw== 'add' ?'添加子菜单': '修改菜单'" :visible.sync="visibleDialog" width="700px">
      <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
          <el-descriptions-item label="父级菜单">
            <el-form-item prop="Parent_Number">
              <el-cascader @change="changecaidan" v-model="form.Parent" placeholder="可选择父级菜单" :options="tableData" :props="{label:'Model_Name',value:'Model_Number',checkStrictly: true }" clearable></el-cascader>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="菜单名称">
            <el-form-item prop="Model_Name">
              <el-input v-model.trim="form.Model_Name" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="菜单顺序">
            <el-form-item prop="Order">
              <el-input v-model.trim="form.Order" placeholder="请输入菜单顺序"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="绑定页面（开发）" v-if="type=='addC'">
            <el-form-item prop="Url">
              <el-input v-model.trim="form.Url" placeholder="请输入绑定页面路径"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="配置SQL（开发）" v-if="type=='addC'">
            <el-form-item prop="Url">
              <div>
                {{form.SQL_SerialNumber?('已配置(SQL编号:'+form.SQL_SerialNumber+')'):'未配置'}}
                <el-button v-if="!form.SQL_SerialNumber" type="primary" size="text" @click="config(form)">前往配置</el-button>
                <el-button v-else type="primary" size="text" @click="configedit(form)">修改配置</el-button>
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="菜单图标" v-if="type=='addF'">
            <el-form-item prop="Icon">
              <el-select placeholder="请选择菜单图标" style="width: 100%" clearable filterable v-model.trim="form.Icon">
                <el-option v-for="(item,index) in Icon" :key="index" :label="item" :value="'layui-icon '+item">
                  <i class="layui-icon" :class="item"></i>
                  <i>{{item}}</i>
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <span slot="footer" style="display: flex; justify-content: center">
        <el-button @click="clearDataAndHideDialog">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
      </span></el-dialog>
  </div>
  <script type="text/javascript" src="../../utils/wangeditor.js"></script>
  <script type="text/javascript" src="../../utils/jquery.min.js"></script>
  <script type="text/javascript" src="../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../config/config.js"></script>
  <script type="text/javascript" src="../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../utils/vuex.min.js"></script>
  <script type="text/javascript" src="../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../component/component.js"></script>
  <script type="text/javascript" src="../../api/request.js"></script>
  <script type="text/javascript" src="../../utils/compressor.js"></script>
  <script type="text/javascript" src="../../utils/ID_Validity.js"></script>
  <script type="text/javascript" src="../../utils/utils.js"></script>
  <script type="text/javascript" src="./js/base_system_model_list.js"></script>
</body>

</html>